// 举报处理
<template>
  <div>
    <el-row style="margin-bottom: 8px">
      <el-col :span="21">
        <h3 style="margin: 5px 0px">举报信息列表</h3>
      </el-col>
    </el-row>
    <!--<el-card style="margin-bottom: 10px">-->
    <!--&lt;!&ndash;      搜索&ndash;&gt;-->
    <!--<el-row :gutter="20">-->
    <!--<el-col :span="16" style="text-align: right">-->
    <!--<el-radio-group v-model="sortType" @change="sort">-->
    <!--<el-radio  label="time">按时间排序</el-radio>-->
    <!--<el-radio  label="like">按评分排序</el-radio>-->
    <!--</el-radio-group>-->
    <!--&lt;!&ndash;          <el-button class  ="btn" icon="el-icon-sort" @click="sort">按时间排序</el-button>&ndash;&gt;-->
    <!--</el-col>-->
    <!--</el-row>-->
    <!--</el-card>-->
    <template>
      <el-table :data="reports" border stripe>
        <el-table-column label="房源ID" prop="id" width="70"></el-table-column>
        <el-table-column label="标题" prop="title" width="600"></el-table-column>
        <el-table-column label="经纪人" prop="manager" width="100"></el-table-column>
        <el-table-column label="申请日期" prop="date" width="150"></el-table-column>
        <el-table-column label="处理日期" prop="deal_date" width="150"></el-table-column>
        <el-table-column label="处理状态" prop="state" width="100"></el-table-column>
        <el-table-column label="操作" width="120">
          <template scope="scope" prop="state">
            <el-button v-if="scope.row.state=='未处理'" @click="onclickDeal(scope.row, scope.$index)">处理</el-button>
            <el-dialog
              title="详情"
              :visible.sync="dialogVisible"
              width="50%"
              :before-close="handleClose">
              <el-divider content-position="left">房源信息</el-divider>
              <span style="padding-left: 45px">房源ID：{{reportOnView.id}}</span><br>
              <span style="padding-left: 45px">标题：{{reportOnView.title}}</span><br>
              <span style="padding-left: 45px">类型：{{reportOnView.type}}</span><br>
              <span style="padding-left: 45px">面积：{{reportOnView.size}}</span><br>
              <span style="padding-left: 45px">楼层：{{reportOnView.floor}}</span><br>
              <span style="padding-left: 45px">朝向：{{reportOnView.towards}}</span><br>
              <div style="padding-left: 45px"><a>描述：{{reportOnView.description}}</a></div>
              <el-divider content-position="left">房源经纪人信息</el-divider>
              <span style="padding-left: 45px">用户ID：{{reportOnView.manager_id}}</span><br>
              <span style="padding-left: 45px">姓名：{{reportOnView.manager}}</span><br>
              <span style="padding-left: 45px">用户名：{{reportOnView.manager_username}}</span><br>
              <span style="padding-left: 45px">联系电话：{{reportOnView.manager_phone}}</span><br>
              <span style="padding-left: 45px">资格证号：{{reportOnView.manager_number_a}}</span>
              <el-divider content-position="left">举报用户信息</el-divider>
              <span style="padding-left: 45px">用户ID：{{reportOnView.user_id}}</span><br>
              <span style="padding-left: 45px">姓名：{{reportOnView.user}}</span><br>
              <span style="padding-left: 45px">用户名：{{reportOnView.user_name}}</span><br>
              <span style="padding-left: 45px">联系电话：{{reportOnView.user_phone}}</span>
              <el-divider content-position="left">举报信息</el-divider>
              <span style="padding-left: 45px">举报日期：{{reportOnView.date}}</span><br>
              <span style="padding-left: 45px">举报详情：{{reportOnView.report_detail}}</span>
              <el-divider content-position="left">处理信息</el-divider>
              <template v-if="reportOnView.state!=='未处理'">
                <span style="padding-left: 45px">处理日期：{{reportOnView.deal_date}}</span><br>
                <span style="padding-left: 45px">经办人：{{reportOnView.deal_admin}}</span><br>
                <span style="padding-left: 45px">处理结果：{{reportOnView.state}}</span><br>
                <div style="padding-left: 45px">处理意见：{{reportOnView.detail}}</div>
              </template>
              <template v-if="reportOnView.state=='未处理'">
                <div style="padding-left: 30px; padding-top: 10px">
                  <el-radio v-model="deal_result" label="不采取操作">不采取操作</el-radio>
                  <el-radio v-model="deal_result" label="下架商品">下架商品</el-radio>
                </div>
                <div style="padding-left: 30px; padding-top: 10px">
                  <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入审核意见"
                  v-model="deal_detail">
                </el-input>
                </div>
              </template>
              <span slot="footer" class="dialog-footer">
                <el-button v-if="reportOnView.state=='未处理'" type="primary" @click="handleClose(onDeal)">确 定</el-button>
                <el-button v-else type="primary" @click="handleClose">确 定</el-button>
              </span>
            </el-dialog>
            <el-button v-if="scope.row.state!=='未处理'" @click="onclickLook(scope.row, scope.$index)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="reports_list.length==0">
      <el-card>
        <div><h4>无符合要求的房源信息</h4></div>
      </el-card>
    </template>
    <el-card :body-style="{ padding: '5px' }" >
      <!--    分页区域-->
      <el-pagination
        style="margin: 5px;padding: 0px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5,10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.reports_list.length"
        align="center"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import ElButton from 'element-ui/packages/button/src/button'

export default {
  components: { ElButton },
  data () {
    return {
      dialogVisible: false,
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      reports_list: [
        { id: 16, report_detail: '货不对板。', user_id: '100019', user_name: 'realuser5', user: '用户己', user_phone: '18823467777', title: '三房合租独卫和熙臻苑贾西南京南景明佳园春江路安德门小行中胜', manager: '赵日天', date: '2021-06-01', deal_date: '', state: '未处理', type: '三室一厅二卫', floor: '5', towards: '北', size: '122.6', manager_id: '100027', description: '浦口龙头公寓、服务宗旨免费带看拒绝中介费1：免费百兆极速宽带、代缴水电煤等生活费用2：协办理大学生住房补贴3.入住深度保洁１客１锁专属管家免费上门维修低楼层、电梯房、精装修、家电家具齐全、拎包入住4.房源描述：精装修家电家具齐全免中介随时看房浦口、桥北、建邺各个小区均有房源5.周边配套设施学校、医院、银行、公园、餐饮、娱乐、菜市场、超市、商场等设施齐全6.公交、地铁路线：浦口10号线地铁临江站、万汇城、工业大学、龙华路、文德路、雨山美地地铁多条公交路线，交通便利。7.房源特点：装修温馨、价格美丽、电梯房、精装修、家电家具齐全、拎包入住', deal_detail: '', manager_username: 'fnhaha', manager_phone: '13216373222', manager_number_a: 'NJ123453', deal_admin: '', address: '南京市建邺区保东路6号' },
        { id: 16, report_detail: '货不对板。', user_id: '100019', user_name: 'realuser5', user: '用户己', user_phone: '18823467777', title: '三房合租独卫和熙臻苑贾西南京南景明佳园春江路安德门小行中胜', manager: '赵日天', date: '2021-06-01', deal_date: '', state: '未处理', type: '三室一厅二卫', floor: '5', towards: '北', size: '122.6', manager_id: '100027', description: '浦口龙头公寓、服务宗旨免费带看拒绝中介费1：免费百兆极速宽带、代缴水电煤等生活费用2：协办理大学生住房补贴3.入住深度保洁１客１锁专属管家免费上门维修低楼层、电梯房、精装修、家电家具齐全、拎包入住4.房源描述：精装修家电家具齐全免中介随时看房浦口、桥北、建邺各个小区均有房源5.周边配套设施学校、医院、银行、公园、餐饮、娱乐、菜市场、超市、商场等设施齐全6.公交、地铁路线：浦口10号线地铁临江站、万汇城、工业大学、龙华路、文德路、雨山美地地铁多条公交路线，交通便利。7.房源特点：装修温馨、价格美丽、电梯房、精装修、家电家具齐全、拎包入住', deal_detail: '', manager_username: 'fnhaha', manager_phone: '13216373222', manager_number_a: 'NJ123453', deal_admin: '', address: '南京市建邺区保东路6号' },
        { id: 16, report_detail: '货不对板。', user_id: '100019', user_name: 'realuser5', user: '用户己', user_phone: '18823467777', title: '三房合租独卫和熙臻苑贾西南京南景明佳园春江路安德门小行中胜', manager: '赵日天', date: '2021-06-01', deal_date: '', state: '未处理', type: '三室一厅二卫', floor: '5', towards: '北', size: '122.6', manager_id: '100027', description: '浦口龙头公寓、服务宗旨免费带看拒绝中介费1：免费百兆极速宽带、代缴水电煤等生活费用2：协办理大学生住房补贴3.入住深度保洁１客１锁专属管家免费上门维修低楼层、电梯房、精装修、家电家具齐全、拎包入住4.房源描述：精装修家电家具齐全免中介随时看房浦口、桥北、建邺各个小区均有房源5.周边配套设施学校、医院、银行、公园、餐饮、娱乐、菜市场、超市、商场等设施齐全6.公交、地铁路线：浦口10号线地铁临江站、万汇城、工业大学、龙华路、文德路、雨山美地地铁多条公交路线，交通便利。7.房源特点：装修温馨、价格美丽、电梯房、精装修、家电家具齐全、拎包入住', deal_detail: '', manager_username: 'fnhaha', manager_phone: '13216373222', manager_number_a: 'NJ123453', deal_admin: '', address: '南京市建邺区保东路6号' },
        { id: 16, report_detail: '货不对板。', user_id: '100019', user_name: 'realuser5', user: '用户己', user_phone: '18823467777', title: '三房合租独卫和熙臻苑贾西南京南景明佳园春江路安德门小行中胜', manager: '赵日天', date: '2021-06-01', deal_date: '2021-06-02', state: '下架商品', type: '三室一厅二卫', floor: '5', towards: '北', size: '122.6', manager_id: '100027', description: '浦口龙头公寓、服务宗旨免费带看拒绝中介费1：免费百兆极速宽带、代缴水电煤等生活费用2：协办理大学生住房补贴3.入住深度保洁１客１锁专属管家免费上门维修低楼层、电梯房、精装修、家电家具齐全、拎包入住4.房源描述：精装修家电家具齐全免中介随时看房浦口、桥北、建邺各个小区均有房源5.周边配套设施学校、医院、银行、公园、餐饮、娱乐、菜市场、超市、商场等设施齐全6.公交、地铁路线：浦口10号线地铁临江站、万汇城、工业大学、龙华路、文德路、雨山美地地铁多条公交路线，交通便利。7.房源特点：装修温馨、价格美丽、电梯房、精装修、家电家具齐全、拎包入住', deal_detail: '举报属实。', manager_username: 'fnhaha', manager_phone: '13216373222', manager_number_a: 'NJ123453', deal_admin: 'fn', address: '南京市建邺区保东路6号' },
        { id: 16, report_detail: '货不对板。', user_id: '100019', user_name: 'realuser5', user: '用户己', user_phone: '18823467777', title: '三房合租独卫和熙臻苑贾西南京南景明佳园春江路安德门小行中胜', manager: '赵日天', date: '2021-06-01', deal_date: '2021-06-02', state: '不采取操作', type: '三室一厅二卫', floor: '5', towards: '北', size: '122.6', manager_id: '100027', description: '浦口龙头公寓、服务宗旨免费带看拒绝中介费1：免费百兆极速宽带、代缴水电煤等生活费用2：协办理大学生住房补贴3.入住深度保洁１客１锁专属管家免费上门维修低楼层、电梯房、精装修、家电家具齐全、拎包入住4.房源描述：精装修家电家具齐全免中介随时看房浦口、桥北、建邺各个小区均有房源5.周边配套设施学校、医院、银行、公园、餐饮、娱乐、菜市场、超市、商场等设施齐全6.公交、地铁路线：浦口10号线地铁临江站、万汇城、工业大学、龙华路、文德路、雨山美地地铁多条公交路线，交通便利。7.房源特点：装修温馨、价格美丽、电梯房、精装修、家电家具齐全、拎包入住', deal_detail: '经核实，房源无违规。', manager_username: 'fnhaha', manager_phone: '13216373222', manager_number_a: 'NJ123453', deal_admin: 'fn', address: '南京市建邺区保东路6号' },
        { id: 16, report_detail: '货不对板。', user_id: '100019', user_name: 'realuser5', user: '用户己', user_phone: '18823467777', title: '三房合租独卫和熙臻苑贾西南京南景明佳园春江路安德门小行中胜', manager: '赵日天', date: '2021-06-01', deal_date: '', state: '未处理', type: '三室一厅二卫', floor: '5', towards: '北', size: '122.6', manager_id: '100027', description: '浦口龙头公寓、服务宗旨免费带看拒绝中介费1：免费百兆极速宽带、代缴水电煤等生活费用2：协办理大学生住房补贴3.入住深度保洁１客１锁专属管家免费上门维修低楼层、电梯房、精装修、家电家具齐全、拎包入住4.房源描述：精装修家电家具齐全免中介随时看房浦口、桥北、建邺各个小区均有房源5.周边配套设施学校、医院、银行、公园、餐饮、娱乐、菜市场、超市、商场等设施齐全6.公交、地铁路线：浦口10号线地铁临江站、万汇城、工业大学、龙华路、文德路、雨山美地地铁多条公交路线，交通便利。7.房源特点：装修温馨、价格美丽、电梯房、精装修、家电家具齐全、拎包入住', deal_detail: '', manager_username: 'fnhaha', manager_phone: '13216373222', manager_number_a: 'NJ123453', deal_admin: '', address: '南京市建邺区保东路6号' },
        { id: 16, report_detail: '货不对板。', user_id: '100019', user_name: 'realuser5', user: '用户己', user_phone: '18823467777', title: '三房合租独卫和熙臻苑贾西南京南景明佳园春江路安德门小行中胜', manager: '赵日天', date: '2021-06-01', deal_date: '', state: '未处理', type: '三室一厅二卫', floor: '5', towards: '北', size: '122.6', manager_id: '100027', description: '浦口龙头公寓、服务宗旨免费带看拒绝中介费1：免费百兆极速宽带、代缴水电煤等生活费用2：协办理大学生住房补贴3.入住深度保洁１客１锁专属管家免费上门维修低楼层、电梯房、精装修、家电家具齐全、拎包入住4.房源描述：精装修家电家具齐全免中介随时看房浦口、桥北、建邺各个小区均有房源5.周边配套设施学校、医院、银行、公园、餐饮、娱乐、菜市场、超市、商场等设施齐全6.公交、地铁路线：浦口10号线地铁临江站、万汇城、工业大学、龙华路、文德路、雨山美地地铁多条公交路线，交通便利。7.房源特点：装修温馨、价格美丽、电梯房、精装修、家电家具齐全、拎包入住', deal_detail: '', manager_username: 'fnhaha', manager_phone: '13216373222', manager_number_a: 'NJ123453', deal_admin: '', address: '南京市建邺区保东路6号' },
        { id: 16, report_detail: '货不对板。', user_id: '100019', user_name: 'realuser5', user: '用户己', user_phone: '18823467777', title: '三房合租独卫和熙臻苑贾西南京南景明佳园春江路安德门小行中胜', manager: '赵日天', date: '2021-06-01', deal_date: '', state: '未处理', type: '三室一厅二卫', floor: '5', towards: '北', size: '122.6', manager_id: '100027', description: '浦口龙头公寓、服务宗旨免费带看拒绝中介费1：免费百兆极速宽带、代缴水电煤等生活费用2：协办理大学生住房补贴3.入住深度保洁１客１锁专属管家免费上门维修低楼层、电梯房、精装修、家电家具齐全、拎包入住4.房源描述：精装修家电家具齐全免中介随时看房浦口、桥北、建邺各个小区均有房源5.周边配套设施学校、医院、银行、公园、餐饮、娱乐、菜市场、超市、商场等设施齐全6.公交、地铁路线：浦口10号线地铁临江站、万汇城、工业大学、龙华路、文德路、雨山美地地铁多条公交路线，交通便利。7.房源特点：装修温馨、价格美丽、电梯房、精装修、家电家具齐全、拎包入住', deal_detail: '', manager_username: 'fnhaha', manager_phone: '13216373222', manager_number_a: 'NJ123453', deal_admin: '', address: '南京市建邺区保东路6号' },
        { id: 16, report_detail: '货不对板。', user_id: '100019', user_name: 'realuser5', user: '用户己', user_phone: '18823467777', title: '三房合租独卫和熙臻苑贾西南京南景明佳园春江路安德门小行中胜', manager: '赵日天', date: '2021-06-01', deal_date: '', state: '未处理', type: '三室一厅二卫', floor: '5', towards: '北', size: '122.6', manager_id: '100027', description: '浦口龙头公寓、服务宗旨免费带看拒绝中介费1：免费百兆极速宽带、代缴水电煤等生活费用2：协办理大学生住房补贴3.入住深度保洁１客１锁专属管家免费上门维修低楼层、电梯房、精装修、家电家具齐全、拎包入住4.房源描述：精装修家电家具齐全免中介随时看房浦口、桥北、建邺各个小区均有房源5.周边配套设施学校、医院、银行、公园、餐饮、娱乐、菜市场、超市、商场等设施齐全6.公交、地铁路线：浦口10号线地铁临江站、万汇城、工业大学、龙华路、文德路、雨山美地地铁多条公交路线，交通便利。7.房源特点：装修温馨、价格美丽、电梯房、精装修、家电家具齐全、拎包入住', deal_detail: '', manager_username: 'fnhaha', manager_phone: '13216373222', manager_number_a: 'NJ123453', deal_admin: '', address: '南京市建邺区保东路6号' }
      ],
      reports: [],
      reportOnView_index: 0,
      reportOnView: '',
      deal_result: '不采取操作',
      deal_detail: ''
    }
  },
  created () {
    this.getreportPage()
  },
  methods: {
    onclickDeal (row, index) {
      this.reportOnView = row
      this.reportOnView_index = index
      this.dialogVisible = true
    },
    onclickLook (row, index) {
      this.reportOnView = row
      this.reportOnView_index = index
      this.dialogVisible = true
    },
    onDeal () {
      this.reports[this.reportOnView_index].deal_date = '2021-06-09'
      this.reports[this.reportOnView_index].deal_admin = 'root'
      this.reports[this.reportOnView_index].detail = this.deal_detail
      this.reports[this.reportOnView_index].state = this.deal_result
    },
    handleClose (done) {
      try {
        done()
      } catch (e) {}
      this.reportOnView = ''
      this.reportOnView_index = 0
      this.deal_result = '不采取操作'
      this.deal_detail = ''
      this.dialogVisible = false
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getreportPage()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getreportPage()
    },
    getreportPage () {
      this.reports = this.reports_list.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, (this.queryInfo.pagenum) * this.queryInfo.pagesize)
    }
  }
}
</script>

<style scoped>
  .movie-card {
    margin-bottom: 15px;
  }

  .cover {
    width: 150px;
    height: 200px;
  }

  .text {
    margin-bottom: 5px;
  }

  .detail {
    display: flex;
    justify-content: flex-end;
  }

  .btn {
    color: white;
    background-color: #07c4a8;
  }
</style>
